@import '../style/theme/color';
@import '../style/theme/variables';
@import '../style/mixins/index';

.nav-tabs {
  border-bottom: 1px $gray1 solid;
  li {
    border-bottom-color: transparent;
    & > a {
      color: $dark1;
    }
    &.active, &:hover {
      border-bottom-color: $status-blue;
      & > a {
        color: $status-blue;
      }
    }
  }
}

.nav-options {
  > li {
    border: 1px $gray1 solid;
    background-color: $white;

    & > a {
      color: $dark1;
    }
    &.active, &:hover {
      & > a {
        color: $white;
        &:hover {
          color: $white;
          background: transparent;
        }
      }
    }

    &.active {
      background-color: $status-blue;
      border-color:  $status-blue;
      &:not(:first-child)::before {
        background-color: $status-blue;
      }
      & + li::before {
        background-color: $status-blue;
      }
    }

    &:hover:not(.active) {
      background-color: $hover-control;
      border-color: $hover-control;
      &:not(:first-child)::before {
        background-color: $hover-control;
      }
    }
  }
}
